<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>真正的产品</title>
    <base href="${pageContext.request.contextPath }/">
    <link rel="stylesheet" type="text/css" href="css/common/commonutils.css">
    <link rel="stylesheet" type="text/css" href="css/index/head.css">
    <link rel="stylesheet" type="text/css" href="css/book/product.css">
    <link rel="stylesheet" type="text/css" href="css/index/foot.css">
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
</head>

<body>
    <!-- 真正的图书内容 -->
    <!-- 头部内容 -->
   <div id="head">
        <!-- 最上方的导航栏 -->
        <div id="navigation">
            <ul>
                <c:if test="${empty sessionScope.user }">
                	<li style="margin-right: 30px;">您好，请先登录~</li>
                </c:if>
                <c:if test="${not empty sessionScope.user }">              
                	<li style="margin-right: 30px;">欢迎您，${sessionScope.user.name }</li>
                </c:if>
                <li>当前所在地：地球村</li>
            </ul>
            
            <ul>
                <li>
                    <i id="shoping_cart_logo"></i>
                    <a href="shoppingcart">购物车</a>
                    <b class="shoping_cart_num">
                    <c:if test="${empty sessionScope.shoppingNum}">0</c:if>
                    <c:if test="${not empty sessionScope.shoppingNum}">${sessionScope.shoppingNum}</c:if>
                    </b>
                </li>
                <li>|</li>
                <li><a href="orders">我的订单</a></li>
                <li>|</li>
                <li id="my_home"><a href="">我的钱包</a><i>您的余额:${sessionScope.user.balance }</i></li>
                <li>|</li>
                <c:if test="${empty sessionScope.user }">
                	<li><a href="login">登录</a></li>
                </c:if>
                <c:if test="${not empty sessionScope.user }">
                	<li><a href="exit">注销</a></li>
                </c:if>
                <li>|</li>
                <li><a href="register">注册</a></li>
            </ul>
        </div>
    </div>
    <!-- logo图片和搜索框 -->
     <div id="logo_line">
            <a href=""><img id="logo" src="images/uugai.com_1604756139381.png" /></a>
        <div id="search">
            <form>
                <input type="text" />
                <input type="submit" value="" />
            </form>
            <div id="searchbottom">
               	热搜:
                <a href="#">安徒生童话</a>
                <a href="#">三体</a>
                <a href="#">python</a>
            </div>
        </div>
        <!-- 设置购物车和订单 -->
        <div id="cart_order">
            <div id="lib_cart">
                <a href="shoppingcart">
                    <i class="cart_logo"></i>
                   	 购物车
                   	 <b class="shoping_cart_num">${sessionScope.shoppingNum}</b>
                </a>
            </div>
            <div id="lib_order">
                <a href="orders">
                    <i id="cart_logo"></i>
                    	我的订单
                </a>
            </div>
        </div>
    </div>
    <!-- 菜单栏 -->
    <div id="menu">
        <ul>
            <li>全部分类</li>
            <!-- 拿到前面八个分类名 -->
            <c:forEach items="${requestScope.categoryByCLevel }" var="category" begin="0" end="7">           		
            		<li><a href="category/${category.id }">${category.name }</a></li>
            </c:forEach>
        </ul>
    </div>
    <!-- 内容 -->
    <div id="product_content">
        <!-- 来个logo -->
        <div id="product_logo"><img src=""></div>

        <!-- 上面的详细信息 -->
        <div id="product_item" index="${requestScope.book.id }">
            <!-- 左边的大图 -->
            <img id="product_pic" src="${requestScope.book.image }" />
            <!-- 右边的详细信息 -->
            <div id="item">
                <!-- 标题 -->
                <p id="item_title">${requestScope.book.title }</p>
                <p id="item_introduction">${requestScope.book.introduction }</p>
                <!-- 价格 -->
                <div id="item_price">
                    <p id="ord">价格<em>￥:<span>${requestScope.book.price }</span></em></p>
                    <p id="now">促销价
                    	<em>￥:
                    		<span><fmt:formatNumber pattern="0.00" value="${requestScope.book.price * requestScope.book.discount / 10}"></fmt:formatNumber></span>
                    	</em>
                    	<span>（${requestScope.book.discount }折）</span>
                    </p>
                </div>
                <!-- 运费 -->
                <p id="carriage">运费<span>电子快递：0.00</span></p>
                <!-- 月销评价 -->
                <ul id="pin">
                    <li>总销量&nbsp;<span>${requestScope.book.sales }</span></li>
                    <li>累计评价&nbsp;<a href="#">${requestScope.book.commentNum}</a></li>
                </ul>
                <!-- 控制数量 -->
                <div id="item_num">
                    	数量<input id="num" type="text" value="1"/>
                    <div>
                        <button></button>
                        <button></button>
                    </div>件
                    &nbsp;&nbsp;
                   	 库存<span>${requestScope.book.stock }</span>件
                </div>
                <!-- 支付方式 -->
                <div id="item_pay">
                    <button>立即购买</button>
                    <button>加入购物车</button>
                </div>
            </div>
        </div>
        <!-- 下面的详情图和评论 -->
        <!-- 上面的选项卡 -->
        <div id="product_table">
            <a class="active" href="#">商品详情<i></i></a>
            <a href="#">商品评价<span>16</span><i></i></a>
        </div>
        <!-- 下面的真正内容 -->
        <div id="pic_or_commont" class="comt">
        	<c:forEach items="${requestScope.comments }" var="comment">
            <div>
                <div class="product_commont">
                    <p>${comment.content }</p>
                    <p><fmt:formatDate value="${comment.createTime }" pattern="yyyy-MM-dd"/></p>
                </div>
                <p class="product_username">${comment.userName }</p>
            </div>
        	</c:forEach>

        </div>
    </div>
    <!-- 尾部 -->
    <div id="footer">Copyright 2020 由小行星个人制作的图书网站</div>
    <script type="text/javascript" src="js/book/product_core.js"></script>
    <script type="text/javascript" src="js/book/product_table.js"></script>
</body>

</html>